﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Products.aspx.cs" Inherits="Products" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style>
        #productsChart text{
            font-family: 'Microsoft JhengHei';
        }
        .ChartTest {
            width: 100%;
        }

        .container {
            width: 100%;
            /*height:200px;*/
        }

        .container-fluid {
            margin-top: 20px;
        }

        @media (max-width: 768px) {

            .container-fluid {
                margin-top: 120px;
                padding-top: 20px;
            }

            #page-wrapper {
                border-top-left-radius: 0px;
                border-bottom-left-radius: 0px;
            }
            
        }
        .select-cate{
                display: inline-block;
                width: auto;
        }
        .panel-body{
            display: inline-block;
        }
        #productsChart{
            display: none;
        }

        #cpAnalysisContainer{
            width: 96%;
            height: auto;
            margin: 15px auto;
            display: none;
        }
        .cpTitle{
            /*border: 1px solid #ddd;*/
            float: left;
            width: 70px;
            height: 170px;
            margin-right:15px;
            
        }
        .cpCenter{
            /*border: 1px solid red;*/
            background: #fff;
            width: auto;
            margin: 10px auto;
            display: table;
            box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);
        }
        .cpContent{
            /*border: 1px solid green;*/
            width: 100%;
            height: 170px;
            margin: 10px auto;
        }
        .contentCotainer{
            background: #fff;
            float: left;
            margin: 0 auto;
            width: 140px;
            height: 170px;
        }
        .imgContainer{
            /*border: 1px solid green;*/
            display: table;
            margin: 10px auto;
        }
        .proImg{
            max-height: 130px;
            max-width: 120px;
        }
        .nameContainer{
            /*border: 1px solid green;*/
            text-align: center;
        }

         .fontcolor {
            color:#888;

        }
        .table-con {
            margin-left:40px;
        }
        .top1 {
            background: url("img/top12345.gif") 0px 0px no-repeat;
        }
        .top2 {
            background: url("img/top12345.gif") -70px 0px no-repeat;
        }
        .top3 {
            background: url("img/top12345.gif") -140px 0px no-repeat;
        }
        .top4 {
            background: url("img/top12345.gif") -210px 0px no-repeat;
        }
        .top5 {
            background: url("img/top12345.gif") -280px 0px no-repeat;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
             <div class="container-fluid fontcolor">
                <!-- Page Heading -->
                <div class="col-lg-4 ChartTest">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-file-text fa-fw"></i>商品分析圖表條件</h3>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive table-con">
                                <span>熱門商品圖表&nbsp;產品種類：</span>
                                <select id="selProsCate" class="form-control select-cate">
                                    <option value="1">手機</option>
                                    <option value="2">平板</option>
                                    <option value="3">穿戴式裝置</option>
                                </select>
                                <button type="button" id="btnPieCateCart" class="btn btn-success">產生圖表</button>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive table-con">
                                <span>熱門比拼商品&nbsp;產品種類：</span>
                                <select id="selCpCate" class="form-control select-cate">
                                    <option value="1">手機</option>
                                    <option value="2">平板</option>
                                    <option value="3">穿戴式裝置</option>
                                </select>
                                <span>個數：</span>
                                <select id="selCpCount" class="form-control select-cate">
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                                <button type="button" id="btnCPCart" class="btn btn-success">產生圖表</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="productsChart" style="min-width: 310px; height: 500px; max-width: 96%; margin: 0 auto"></div>

            <div id="cpAnalysisContainer">
                <div class="cpCenter jumbotron">
                    <div id="cpTop1" class="cpContent">
                        <div class="cpTitle top1"></div>
                   </div>
                </div>
               <div class="cpCenter jumbotron">
                    <div id="cpTop2" class="cpContent">
                        <div class="cpTitle top2"></div>
                    </div>
                </div>
                <div class="cpCenter jumbotron">
                    <div id="cpTop3" class="cpContent">
                        <div class="cpTitle top3"></div>
                    </div>
                </div>
                <div class="cpCenter jumbotron">
                    <div id="cpTop4" class="cpContent">
                        <div class="cpTitle top4"></div>
                    </div>
                </div>
                <div class="cpCenter jumbotron">
                    <div id="cpTop5" class="cpContent">
                        <div class="cpTitle top5"></div>
                    </div>
                </div>
            </div>
    <script>
        $('#btnCPCart').click(function () {
            $('#productsChart').hide();
            showElement($('#cpAnalysisContainer'));
            var categoryId = $('#selCpCate').val();
            var count = $('#selCpCount').val();
            getCpAnalysis(categoryId, count);
        })

        function getCpAnalysis(categoryId, count) {
            $('.cpContent').children('.contentCotainer').remove();
            $.getJSON('Handler/HandlerProducts.ashx', { status: 'cpAnalysis', c_id: categoryId, count: count }, function (data) {
                var num = 0;
                var divElem;
                for (var i = 0; i < data.length; i++) {
                    if (i % count == 0) {
                        num = num + 1;
                    }
                    var name = data[i].Name;
                    var pic = "images/phone.png";
                    if (data[i].Image != null) {
                        pic = "data:image/jpg;base64," + data[i].Image;
                    }
                    var elem = '<div class="contentCotainer">' +
                                        '<div class="imgContainer"><img class="proImg" src="' + pic + '" /></div>' +
                                        '<div class="nameContainer"><span class="proName"></span>' + name + '</div>' +
                                        '</div>';
                    divElem = $("#cpTop" + num);
                    divElem.append(elem);
                }
                
            });
        }


        $('#btnPieCateCart').click(function () {
            $('#cpAnalysisContainer').hide();
            showElement($('#productsChart'));
            var categoryId = $('#selProsCate').val();
            var titleText = '熱門' + $('#selProsCate :selected').text() +'商品';
            getProductsAnalysis(categoryId, titleText);
        })

        function getProductsAnalysis(categoryId, titleText) {
            $.get('Handler/HandlerProducts.ashx', { status:'prosAnalysis' , c_id: categoryId }, function (data) {
                var ChartList = [];
                for (var i = 0; i < data.Products.length; i++) {
                    ChartList.push([data.Products[i].product_name, data.Products[i].count]);
                }
                $('#productsChart').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: 1,//null,
                        plotShadow: false
                    },
                    title: {
                        text: titleText
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: ChartList
                    }]
                });
            })
        }
        
    </script>
</asp:Content>

